<template>
  <div class="app">
    <!-- 加载动画 -->
    <div class="masks">
      <div class="radio">
        <div class="ddr ddr1"></div>
        <div class="ddr ddr2"></div>
        <div class="ddr ddr3"></div>
        <div class="ddr ddr4"></div>
        <div class="ddr ddr5"></div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <div class="back_top" title="返回顶部">
      <img src="/img/back.png" alt="">
      <dd>顶部</dd>
    </div>
     <!--头部 -->
    <nav class="header" :class="{isclass:isFixed}">
      <div class="nav center">
        <!--左边log -->
        <div class="log">
          <a class="login" href="#">
            <svg
            data-noselect
            viewBox="168 48 465 471"
            width="150"
            ref="svg_canvas"
            height="120"
            preserveAspectRatio="none"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            :class="{isclass:isFixed}"
            style="position: fixed; top:-30px; cursor: pointer;"
          >
            <g
              id="shape_LLYMbL3d87"
              ref="shape_LLYMbL3d87"
              key="shape_LLYMbL3d87"
              transform="translate(248,128) rotate(0,152.5,152.5) scale(1,1)"
              style="cursor:move;display:inline;opacity:1;"
              filter
            >
              <g style="display:inline">
                <rect fill="rgba(0,0,0,0)" width="325" height="325" x="-10" y="-10" />
                <svg
                  version="1.1"
                  id="图层_1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="0px"
                  y="0px"
                  width="305"
                  height="305"
                  viewBox="0 0 100 100"
                  enable-background="new 0 0 100 100"
                  xml:space="preserve"
                  shapetype="ellipse"
                  preserveAspectRatio="none"
                  data-parent="shape_LLYMbL3d87"
                >
                  <linearGradient
                    class
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%"
                    gradientTransform="translate(0.5,0.5) rotate(0) translate(-0.5,-0.5)"
                  >
                    <stop id="stop1_xAmY6J6Tgg" offset="0%" class stop-color="#05a" />
                    <stop id="stop2_hljQfB8EmQ" offset="100%" class stop-color="#0a5" />
                  </linearGradient>

                  <radialGradient class cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                    <stop offset="0%" class stop-color="#05a" />
                    <stop offset="100%" class stop-color="#0a5" />
                  </radialGradient>
                </svg>
              </g>
            </g>
            <g
              id="shape_IIF9kxcMVF"
              ref="shape_IIF9kxcMVF"
              key="shape_IIF9kxcMVF"
              transform="translate(398.5,301) rotate(270,17,69) scale(-1,-1)"
              style="cursor:move;display:inline;opacity:1;"
              filter
            >
              <g style="display:inline">
                <rect fill="rgba(0,0,0,0)" width="54" height="158" x="-10" y="-10" />
                <svg
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="-34"
                  y="-138"
                  width="34"
                  height="138"
                  viewBox="0 0 100 100"
                  enable-background="new 0 0 100 100"
                  xml:space="preserve"
                  shapetype="right triangle"
                  preserveAspectRatio="none"
                  data-parent="shape_IIF9kxcMVF"
                >
                  <linearGradient
                    class
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%"
                    gradientTransform="translate(0.5,0.5) rotate(0) translate(-0.5,-0.5)"
                  >
                    <stop id="stop1_lzFan9tW31" offset="0%" class stop-color="#05a" />
                    <stop id="stop2_TDooyQEgqT" offset="100%" class stop-color="#0a5" />
                  </linearGradient>

                  <radialGradient class cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                    <stop offset="0%" class stop-color="#05a" />
                    <stop offset="100%" class stop-color="#0a5" />
                  </radialGradient>
                  <clipPath id="f_right_triangle_VJXHr4QvHF" class>
                    <polygon
                      class
                      fill="none"
                      stroke="#dddddd"
                      stroke-width="1"
                      stroke-miterlimit="10"
                      points="0,0 0,100 100,100"
                    />
                  </clipPath>
                  <polygon
                    fill="#fff"
                    opacity="1"
                    class
                    points="0 1 0 100 99 100"
                    clip-path="url(#f_right_triangle_VJXHr4QvHF)"
                  />
                  <polygon
                    class
                    fill="none"
                    stroke="#dddddd"
                    stroke-width="0"
                    stroke-miterlimit="10"
                    points="0,0 0,100 100,100"
                    clip-path="url(#f_right_triangle_VJXHr4QvHF)"
                  />
                </svg>
              </g>
            </g>
            <g
              id="shape_FZyaAYumw5"
              ref="shape_FZyaAYumw5"
              key="shape_FZyaAYumw5"
              transform="translate(317.12150024414,201.77642822266) rotate(0,143.3685,51.35) scale(1,1)"
              style="cursor:move;display:inline;opacity:1;"
              filter
            >
              <g style="display:inline">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  version="1.1"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  overflow="hidden"
                  style="top:0; left: 0"
                  width="163.757"
                  height="102.7"
                  viewBox="0 0 158.757 102.7"
                  preserveAspectRatio="none"
                  data-parent="shape_FZyaAYumw5"
                >
                  <rect fill="rgba(0,0,0,0)" width="163.757" height="102.7" />
                  <rect opacity="0" />
                  <g transform="translate(0 0)" data-width="153.757">
                    <path
                      fill="#fff"
                      d="M3.71 0Q3.32 0 3.04-0.28Q2.77-0.55 2.77-0.95L2.77-0.95L2.77-54.35Q2.77-54.75 3.04-55.02Q3.32-55.30 3.71-55.30L3.71-55.30L18.80-55.30Q26.39-55.30 30.97-51.03Q35.55-46.77 35.55-39.74L35.55-39.74L35.55-15.56Q35.55-8.53 30.97-4.27Q26.39 0 18.80 0L18.80 0L3.71 0ZM15.88-11.61Q15.88-11.22 16.27-11.22L16.27-11.22L18.49-11.30Q20.14-11.38 21.25-12.76Q22.36-14.14 22.44-16.43L22.44-16.43L22.44-38.87Q22.44-41.24 21.33-42.66Q20.22-44.08 18.41-44.08L18.41-44.08L16.27-44.08Q15.88-44.08 15.88-43.69L15.88-43.69L15.88-11.61Z"
                      transform="translate(5 79)"
                      data-glyph-w="37.92"
                    />
                    <path
                      fill="#fff"
                      d="M26.70 0Q25.75 0 25.68-0.87L25.68-0.87L24.65-7.74Q24.65-8.14 24.17-8.14L24.17-8.14L15.64-8.14Q15.17-8.14 15.17-7.74L15.17-7.74L14.22-0.87Q14.14 0 13.19 0L13.19 0L1.98 0Q0.95 0 1.19-1.03L1.19-1.03L12.64-54.43Q12.80-55.30 13.67-55.30L13.67-55.30L26.54-55.30Q27.41-55.30 27.57-54.43L27.57-54.43L38.95-1.03L39.03-0.71Q39.03 0 38.16 0L38.16 0L26.70 0ZM16.91-18.64Q16.91-18.25 17.22-18.25L17.22-18.25L22.52-18.25Q22.83-18.25 22.83-18.64L22.83-18.64L19.99-36.66Q19.91-36.97 19.75-36.97Q19.59-36.97 19.51-36.66L19.51-36.66L16.91-18.64Z"
                      transform="translate(42.92 79)"
                      data-glyph-w="40.132"
                    />
                    <path
                      fill="#fff"
                      d="M33.10-45.03Q33.10-44.63 32.82-44.36Q32.55-44.08 32.15-44.08L32.15-44.08L16.27-44.08Q15.88-44.08 15.88-43.69L15.88-43.69L15.88-33.73Q15.88-33.34 16.27-33.34L16.27-33.34L24.96-33.34Q25.36-33.34 25.64-33.06Q25.91-32.79 25.91-32.39L25.91-32.39L25.91-22.99Q25.91-22.59 25.64-22.32Q25.36-22.04 24.96-22.04L24.96-22.04L16.27-22.04Q15.88-22.04 15.88-21.65L15.88-21.65L15.88-11.61Q15.88-11.22 16.27-11.22L16.27-11.22L32.15-11.22Q32.55-11.22 32.82-10.94Q33.10-10.67 33.10-10.27L33.10-10.27L33.10-0.95Q33.10-0.55 32.82-0.28Q32.55 0 32.15 0L32.15 0L3.71 0Q3.32 0 3.04-0.28Q2.77-0.55 2.77-0.95L2.77-0.95L2.77-54.35Q2.77-54.75 3.04-55.02Q3.32-55.30 3.71-55.30L3.71-55.30L32.15-55.30Q32.55-55.30 32.82-55.02Q33.10-54.75 33.10-54.35L33.10-54.35L33.10-45.03Z"
                      transform="translate(83.05199999999999 79)"
                      data-glyph-w="34.839"
                    />
                    <path
                      fill="#fff"
                      d="M18.17 0.63Q13.35 0.63 9.72-1.22Q6.08-3.08 4.07-6.44Q2.05-9.80 2.05-14.06L2.05-14.06L2.05-16.51Q2.05-16.91 2.33-17.18Q2.61-17.46 3.00-17.46L3.00-17.46L14.06-17.46Q14.46-17.46 14.73-17.18Q15.01-16.91 15.01-16.51L15.01-16.51L15.01-14.69Q15.01-12.80 15.92-11.69Q16.83-10.59 18.25-10.59L18.25-10.59Q19.67-10.59 20.58-11.65Q21.49-12.72 21.49-14.38L21.49-14.38Q21.49-16.20 20.07-17.66Q18.64-19.12 14.38-22.20L14.38-22.20Q10.43-25.04 7.90-27.29Q5.37-29.55 3.56-32.90Q1.74-36.26 1.74-40.69L1.74-40.69Q1.74-45.19 3.75-48.66Q5.77-52.14 9.44-54.04Q13.11-55.93 17.85-55.93L17.85-55.93Q22.67-55.93 26.35-54.00Q30.02-52.06 32.03-48.55Q34.05-45.03 34.05-40.45L34.05-40.45L34.05-38.55Q34.05-38.16 33.77-37.88Q33.50-37.60 33.10-37.60L33.10-37.60L22.12-37.60Q21.73-37.60 21.45-37.88Q21.17-38.16 21.17-38.55L21.17-38.55L21.17-40.76Q21.17-42.50 20.22-43.61Q19.28-44.71 17.85-44.71L17.85-44.71Q16.43-44.71 15.56-43.61Q14.69-42.50 14.69-40.69L14.69-40.69Q14.69-38.71 16.04-37.13Q17.38-35.55 21.49-32.55L21.49-32.55Q26.46-28.84 28.99-26.54Q31.52-24.25 32.94-21.45Q34.37-18.64 34.37-14.85L34.37-14.85Q34.37-7.74 29.90-3.56Q25.44 0.63 18.17 0.63L18.17 0.63Z"
                      transform="translate(117.89099999999999 79)"
                      data-glyph-w="35.866"
                    />
                  </g>
                </svg>
              </g>
            </g>
            <g
              id="shape_A2NAxKuRgo"
              ref="shape_A2NAxKuRgo"
              key="shape_A2NAxKuRgo"
              transform="translate(339.44100000000003,291.83492279053) rotate(0,118.5,24.78) scale(1,1)"
              style="cursor:move;display:inline;opacity:1;"
              filter
            >
              <g style="display:inline">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  version="1.1"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  overflow="hidden"
                  style="top:0; left: 0"
                  width="119.118"
                  height="49.56"
                  viewBox="0 0 114.118 49.56"
                  preserveAspectRatio="none"
                  data-parent="shape_A2NAxKuRgo"
                >
                  <rect fill="rgba(0,0,0,0)" width="119.118" height="49.56" />
                  <rect opacity="0" />
                  <g transform="translate(0 0)" data-width="109.118">
                    <path
                      fill="#fff"
                      d="M12.10 0L4.20 0L4.20-30.79L11.93-30.79Q19.03-30.79 22.74-26.82Q26.46-22.85 26.46-15.50L26.46-15.50Q26.46-8.19 22.76-4.10Q19.07 0 12.10 0L12.10 0ZM8.11-27.64L8.11-3.19L11.59-3.19Q17.05-3.19 19.74-6.43Q22.43-9.66 22.43-15.50L22.43-15.50Q22.43-21.38 19.74-24.51Q17.05-27.64 11.59-27.64L11.59-27.64L8.11-27.64Z"
                      transform="translate(5 36.96)"
                      data-glyph-w="28.854000000000003"
                    />
                    <path
                      fill="#fff"
                      d="M9.53-17.22L8.02-12.52L17.35-12.52L15.88-17.22Q14.24-22.39 12.77-27.64L12.77-27.64L12.60-27.64Q11.17-22.34 9.53-17.22L9.53-17.22ZM25.37 0L21.25 0L18.31-9.41L7.06-9.41L4.07 0L0.13 0L10.58-30.79L14.91-30.79L25.37 0Z"
                      transform="translate(33.854 36.96)"
                      data-glyph-w="25.494000000000003"
                    />
                    <path
                      fill="#fff"
                      d="M22.43 0L4.20 0L4.20-30.79L21.97-30.79L21.97-27.51L8.11-27.51L8.11-17.85L19.78-17.85L19.78-14.53L8.11-14.53L8.11-3.32L22.43-3.32L22.43 0Z"
                      transform="translate(59.348 36.96)"
                      data-glyph-w="24.696"
                    />
                    <path
                      fill="#fff"
                      d="M12.77 0.55L12.77 0.55Q9.49 0.55 6.74-0.67Q3.99-1.89 1.97-4.03L1.97-4.03L4.28-6.68Q8.02-2.86 12.81-2.86L12.81-2.86Q15.83-2.86 17.56-4.24Q19.28-5.63 19.28-7.90L19.28-7.90Q19.28-9.49 18.61-10.44Q17.93-11.38 16.78-12.05Q15.62-12.73 14.15-13.36L14.15-13.36L9.70-15.29Q8.23-15.88 6.80-16.88Q5.38-17.89 4.41-19.43Q3.44-20.96 3.44-23.18L3.44-23.18Q3.44-26.75 6.20-29.06Q8.95-31.37 13.15-31.37L13.15-31.37Q15.88-31.37 18.23-30.32Q20.58-29.27 22.22-27.55L22.22-27.55L20.16-25.07Q18.73-26.42 17.01-27.20Q15.29-27.97 13.15-27.97L13.15-27.97Q10.54-27.97 8.97-26.75Q7.39-25.54 7.39-23.44L7.39-23.44Q7.39-21.97 8.17-21Q8.95-20.03 10.10-19.43Q11.26-18.82 12.47-18.31L12.47-18.31L16.88-16.42Q18.69-15.67 20.12-14.62Q21.55-13.57 22.39-12.03Q23.23-10.50 23.23-8.19L23.23-8.19Q23.23-4.54 20.41-2.00Q17.60 0.55 12.77 0.55Z"
                      transform="translate(84.044 36.96)"
                      data-glyph-w="25.074"
                    />
                  </g>
                </svg>
              </g>
            </g>
            </svg>
          </a>
        </div>
        <!--右边导航 -->
        <div class="menu">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            text-color="#fff"
            background-color="rgba(255,255,255,0)"
            active-text-color="#fff"
          >
            <el-menu-item index="0"><router-link to="/" class="menuList"><i class="iconfont icon-shouye1-copy"></i> 首页</router-link></el-menu-item>

            <el-menu-item index="1"><router-link to="/frontend" class="menuList"><i class="iconfont icon-quanju_qianduanjiemian"></i> 文章 </router-link></el-menu-item>

            <el-menu-item index="2"><a href="https://code.visualstudio.com/" class="menuList" target="_black"><i class="iconfont icon-gongju-"></i> 开发工具 </a></el-menu-item>

            <el-menu-item index="3"><a href="http://hxs0623.cn3v.net/" target="_black" class="menuList"><i class="iconfont icon-tijikongjian"></i> 关于我 </a></el-menu-item>
          </el-menu>
        </div>
      </div>
    </nav>

    <!-- 内容 -->
    <router-view />
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '-1',
      isFixed: true
    }
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
      var offsetTop = document.querySelector('.app').offsetTop // 要滚动到顶部吸附的元素的偏移量
      // eslint-disable-next-line no-unneeded-ternary
      this.isFixed = scrollTop > offsetTop + 60 ? false : true // 如果滚动到顶部了，this.isFixed就为true
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="less" scoped>
.app{
  width: 100%;
}
.center {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}
.header {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  max-height: 66px;
  background-color: #0f84f1;
  overflow: hidden;
}
.nav {
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
}
.log {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
.menu {
  width: 75%;
  display: flex;
  justify-content: flex-end;
}
.el-menu li {
  height: 66px;
  line-height: 66px;
  padding: 0;
  i{
    color: #fff;
  }
  .menuList{
    text-decoration: none;
    line-height: 66px;
    display: inline-block;
    padding: 0 15px;
    font-size: 14px;
  }
}

.login{
  position: absolute;
  top: -13px;
  cursor: pointer;
  path,rect,svg,g{
  cursor: pointer;
  }
}

.isclass{
  position: fixed;
  top:0;
  background-color: rgba(255,255,255,0);
}
.bg{
  background-color: rgba(255,255,255,0);
}
.masks{
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 99;
  display: none;
}
.radio{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8888;
}
.ddr{
    width: 5px;
    height: 38px;
    float: left;
    margin: 2px;
    background-color: #67cf22;
    animation: loading 1s infinite ease-in-out;/*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}
.ddr2{
    animation-delay: -0.9s;/*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}
.ddr3{
    animation-delay: -0.8s;
}
.ddr4{
    animation-delay: -0.7s;
}
.ddr5{
    animation-delay: -0.6s;
}
@keyframes loading {
    0%,40%,100%{ /*定义每帧的动作*/
        -webkit-transform: scaleY(0.5);
    }
    20%{
        -webkit-transform: scaleY(1);
    }
}
</style>
